<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">
        <div v-if="false">
            <h2>{{msg}}</h2>
            <h3 v-once>word -- {{word}}</h3>
            <h4 v-text="word" v-bind:data-id="id" v-bind:data-word="word"></h4>
            <p>
                <input type="text" name="" id="" v-model="word">
            </p>
            <p v-html="tag"></p>
            <img v-if="flag" :src="imgSrc" width="200" height="200" alt="">
            <button @click="flag=!flag">点击切换{{!flag?"显示":"隐藏"}}</button>
            <div v-show="flag">
                v-show 只是样式css切换
            </div>
        </div>
        <div>
            <h2>计算属性 对于任何复杂逻辑，你都应当使用计算属性</h2>
            <h2>侦听属性 watch</h2>
            <div>
                <p>{{message}}</p>
                <p>{{message.split("").reverse().join("")}}</p>
                <p>{{reverseMsg}}</p>
                <p>
                    <input type="text" name="" id="" v-model="message">
                </p>
            </div>
            <div>
                <p>computed VS methods</p>
                <p>data == {{text}}</p>
                <p>
                    computed == {{reserseText }}
                </p>
                <p>
                    methods == {{getText() }}
                </p>
                <p>
                    <input type="text" name="" id="" v-model="text">
                </p>
            </div>
            <div>
                <h2>watch</h2>
                <p>姓：<input type="text" name="" id="" v-model="firstName"></p>
                <p>名：<input type="text" name="" id="" v-model="lastName"></p>
                <p>fullName:{{firstName + '-' + lastName}}</p>
                <p>fullName: {{fullName}}</p>
                <p>fuName : {{fuName}} </p>
                <p>myName : {{myName}} </p>
            </div>

            <div>
                <h2>smallNum == {{smallNum}}</h2>
                <h2>bigNum == {{bigNum}}</h2>

                <button @click="smallNum = 1000">smallNum = 1000</button>
                <button @click="bigNum = 5000">smallNum = 5000</button>
            </div>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        data: {
            msg: "模板语法  双大括号语法",
            word: "wh2110-datdayup",
            tag: "<i>Are you ok？</i>",
            id: 2110,
            imgSrc: "../1.jpg",
            flag: !!0,

            message: "WH2110-DayDayUP - YYDS",
            text: "wh2110 - Learn More About Vue",

            firstName: "JOBS",
            lastName: "xiaohan",
            fullName: "JOBS - xiaohan",
            smallNum: 500,

        },
        watch: { //侦听器 监听一个数据改变 执行对应的回调函数
            text(v) {
                console.log("你修改了 text--" + v);
            },
            firstName(v) {
                this.fullName = v + "&" + this.lastName
            },
            lastName(v) {
                this.fullName = this.firstName + "&" + v;
            }


        },
        computed: {  // 计算属性
            bigNum: {
                get() {
                    return this.smallNum + 3000
                },
                set(v) {
                    this.smallNum = v
                }
            },
            myName: {
                // getter 设置 计算属性的值  取值
                // 默认 
                get() {
                    return this.firstName + "%" + this.lastName;
                },
                // setter 监听计算属性的值 主动改变
                set(v) {
                    console.log(v);
                    var names = v.split("%");
                    this.firstName = names[0]
                    this.lastName = names[1]
                }
            },
            fuName() {    // get 
                return this.firstName + "~" + this.lastName
            },


            reverseMsg() {
                return this.message.split("").reverse().join("")
            },
            reserseText() {
                return this.text.split("").reverse().join("") + "" + new Date().getSeconds()
            },


        },

        methods: {
            getText() {
                return this.text.split("").reverse().join("") + " " + new Date().getSeconds()
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.msg
            }
        }
    }).$mount("#app")

    vm.$watch("firstName", v => {
        console.log(v)
    })
</script>
<!--
    Vue.js 使用了基于 HTML 的模板语法 允许开发者声明式地将 DOM 绑定至底层 Vue 实例的属性

    Vue 将模板编译成虚拟DOM渲染函数
    结合响应式系统，Vue能够智能的计算出最少需要重新渲染多少组件，并把DOM操作次数减少到最少（Diff算法）

    {{}} 模板语法 双大括号语法 文本插值 插值表达式
    无论何时，绑定的数据对象上 property 发生了改变，插值处的内容都会更新
    v-text 绑定文本 textContent
    v-html 绑定html innerHTML
    v-once 你也能执行一次性的插值，当数据改变时，插值处的内容不会更新
    v-bind 绑定属性 attr ：缩写 attribute
    v-on 绑定事件 @
    v-if
    v-show

    data 属性       用来初始化 数据 简单数据
    计算属性        对于任何复杂逻辑，你都应当使用计算属性
    computed        是一个变量 类似data this.xxxx
    依赖            其他某个数值    watcher
    缓存            只有修改计算属性依赖的值 才会重新计算求值（计算属性是基于它们的响应式依赖进行缓存的）

    拆分写法
    getter 默认有一个 getter取值
    setter 监听计算属性的值 主动改变


    侦听属性 watch （修改数据  触发监听  从而请求ajax）
    监听某些数据需要随着其他的数据的变化而变化
    监听变量变化 然后获取ajax



  -->

</html>